<!doctype html>
<html lang="en">
<head>
    <title>BarChart - Ajax Data</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/raphael-min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijbarchart.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">


        $(document).ready(function () {
            var netflx = "http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc";

            $.ajax({
                dataType: "jsonp",
                url: netflx,
                jsonpCallback: "callback",
                success: callback
            });
        });

        function callback(result) {
            // unwrap result
            var names = [];
            var ratings = [];

            var movies = result["d"]["results"];

            for (var i = 0; i < movies.length; i++) {

                names.push(movies[i].Name);
                ratings.push(movies[i].AverageRating);
            }

            $("#wijbarchart").wijbarchart({
                axis: {
                    y: {
                        text: "Average Rating",
                        min: 0,
                        max: 5,
                        autoMin: false,
                        autoMax: false
                    },
                    x: {
                        text: ""
                    }
                },
                hint: {
                    content: function () {
                        return this.data.label + '\n ' + this.y + '';
                    }
                },
                header: {
                    text: "Top 10 Movies by Genre - Netflix OData"
                },
                seriesList: [
                    {
                        label: "Horror",
                        legendEntry: true,
                        fitType: "spline",
                        data: {
                            x: names,
                            y: ratings
                        },
                        markers: {
                            visible: true,
                            type: "circle"
                        }
                    }
                ]
            });
        }

    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                External Datasource</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px">
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                This sample illustrates how to create a chart using data from an external data source. In this example, we are using data from the Netflix OData feed.
            </p>
            <ul>
                <li>Data URL: <a href="http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc">http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc</a> </li>
                <li>API Documentation: <a href="http://developer.netflix.com/docs/oData_Catalog">http://developer.netflix.com/docs/oData_Catalog</a> </li>
            </ul>
        </div>
    </div>
</body>
</html>
